<template>
  <div class="app-container">
    <div style="margin-bottom: 30px">
      <el-row :gutter="20">
        <el-button
          type="success"
          :icon="DocumentAdd"
          @click="saveSysMenuHandler(-1)"
          v-hasPerm="['system:menu:add']"
          >新增</el-button
        >
      </el-row>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      :default-expand-all="false"
      stripe
      :row-style="{ height: '40px' }"
      :cell-style="{ padding: '0px' }"
      row-class-name="table-row-cls"
    >
      <el-table-column
        prop="name"
        label="菜单名称"
        width="180px"
        align="center"
      />
      <el-table-column prop="icon" label="图标" align="center">
        <template v-slot="scope">
          <svg-icon :name="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column
        prop="orderNum"
        label="排序"
        width="80px"
        align="center"
      />
      <el-table-column
        prop="perms"
        label="权限标识"
        width="150px"
        align="center"
      />
      <el-table-column
        prop="component"
        label="组件路径"
        width="150px"
        align="center"
      />
      <el-table-column
        prop="menuType"
        label="菜单类型"
        width="100px"
        align="center"
      >
        <template v-slot="scope">
          <el-tag type="danger" v-if="scope.row.menuType == 'M'">目录</el-tag>
          <el-tag type="success" v-if="scope.row.menuType == 'C'">菜单</el-tag>
          <el-tag type="warning" v-if="scope.row.menuType == 'F'">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" width="180px" label="创建时间" align="center" />
      <el-table-column
        prop="action"
        label="操作"
        width="150"
        align="center"
      >
        <template v-slot="scope">
          <el-button
            type="primary"
            :icon="Edit"
            v-hasPerm="['system:menu:edit']"
            @click="saveSysMenuHandler(scope.row.id)"
            size="small"
             text
          >编辑</el-button>
          <el-popconfirm
            title="您确定删除这个记录吗？"
            @confirm="handleDelete(scope.row)"
             v-hasPerm="['system:menu:delete']"
          >
            <template #reference>
              <el-button
                type="danger"
                :icon="Delete"
                size="small"
                text
              >删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <menu-dialog
    v-model="dialogVisible"
    :id="menuId"
    :dialogTitle="dialogTitle"
    :dialogVisible="dialogVisible"
    :tableData="tableDataNoButtons"
    @initMenuList="initMenuList"
  />
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { deleteMenu, treeList, treeListNoButtons } from "@/api/menu";
import {
  Delete,
  DocumentAdd,
  Edit,
  RefreshRight,
  Search,
  Tools,
} from "@element-plus/icons-vue";

import MenuDialog from "./components/MenuDialog.vue";

const tableData = ref([]);
const tableDataNoButtons = ref([]);
const menuId = ref(-1);
const dialogTitle = ref("");
const dialogVisible = ref(false);

const handleDelete = async (row) => {
  const res = await deleteMenu(row);
  const data = res.data;
  if (data.code == 200) {
    ElMessage({
      type: "success",
      message: data.msg,
    });
    initMenuList();
  } else {
    if (data.code != 500) {
      ElMessage({
        type: "error",
        message: data.msg,
      });
    }
  }
};

const saveSysMenuHandler = (mId) => {
  if (mId > 0) {
    menuId.value = mId;
    dialogTitle.value = "编辑菜单";
  } else {
    menuId.value = -1;
    dialogTitle.value = "新增菜单";
  }
  dialogVisible.value = true;
};
const initMenuList = async () => {
  const res = await treeList();
  const data = res.data;
  if (data.code == 200) {
    tableData.value = data.data.treeMenu;
  }
  const resNoButtons = await treeListNoButtons();
  const dataNoButtons = resNoButtons.data;
  if (dataNoButtons.code == 200) {
    tableDataNoButtons.value = dataNoButtons.data.treeMenu;
  }
};
onMounted(() => {
  initMenuList();
});
</script>

<style lang="less" scoped>
.app-container {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .header {
    margin-bottom: 20px;
  }
}
</style>
<style lang="less">
.table-row-cls {
  .el-button + .el-button {
    margin-left: 0;
  }
}
</style>